<template>

	<view class="oval"  :style="{width:width,height:height}">
		<image :src="url+'?imageView2/0/w/200/h/200'" mode="aspectFill" :style="{width:width,height:height}"
			class="oval" @load="onSuccess" @error="onErrorCallBack" v-show="loadingStatus==10&&url!=null&&url!=''">
		</image>
		<view
			class="match-height match-height ver ver-center hor-center font-color-white uni-bold corner-stroke-white100 oval text-center font18"
			:style="{width:width,'height':height}" v-show="loadingStatus==1||url==null||url==''">
			<view>{{showName}}</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "avatar",
		//属性
		props: {
			// 属性名称: {
			// 	type: String, //属性类型
			// 	value: "值"
			// },
			// ......
			url: {},
			success: {
				default: 1 //1成功 0失败
			},
			name: {
				default: ""
			},
			width: {},
			height: {}
		},
		data() {
			return {
				errorUrl: "~@/static/logo.png",
				loadingStatus: 0, //0加载中 1.加载失败 10.加载成功 
				showName: ""
			}
		},
		watch: {
			name(v) {
				this.setName()
			}
		},
		//组件生命周期
		created: function(e) {
			// console.log(this.name)
			this.setName()
		},
		methods: {
			onSuccess() {
				this.loadingStatus = 10
				// console.log("chengogng")
			},
			onErrorCallBack() {
				this.loadingStatus = 1
				// console.log("shibai")
			},
			setName() {
				// console.log(this.name)
				if (this.name == null || this.name == "") {
					this.showName = "小碳生"
				} else { //取第一个字符
					this.showName = this.name.substring(0, 1)
				}
			}

		}
	}
</script>

<style>
</style>